<template>
  <header-option>
    <template v-slot:btn>
      <cs-btn
        type="primary"
        btnText="发布新闻"
        @click.native="publishNewsLinkClick"
      />
      <cs-btn
        type="search"
        btnText="新闻类型"
        @click.native="openNewsTypeDialogLinkClick"
      />
    </template>
    <template v-slot:input>
      <el-input
        v-model.trim="headerData.newsTitle"
        placeholder="请输入新闻标题"
        clearable
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <el-date-picker
        v-model="headerData.timeValue"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
        clearable
        class="timePicker_G headerRightMargin_G"
      >
      </el-date-picker>
      <cs-btn type="search" btnText="查询" @click.native="searchBtnClick" />
    </template>
  </header-option>
</template>

<script>
import HeaderOption from "@/components/HeaderOption/HeaderOption.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

import _ from "lodash";

export default {
  name: "adHeader",
  components: {
    HeaderOption,
    CsBtn,
  },
  data() {
    return {
      headerData: {
        newsTitle: "",
        timeValue: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    "headerData.newsTitle"(newValue) {
      if (newValue === "") {
        this.$emit("changeNewsHeaderData", this.headerData);
      }
    },
    "headerData.timeValue"(newValue) {
      if (newValue === null) {
        this.$emit("changeNewsHeaderData", this.headerData);
      }
    },
  },
  methods: {
    publishNewsLinkClick() {
      this.$router.push("/releaseNews");
    },
    openNewsTypeDialogLinkClick() {
      this.$emit("openNewsTypeDialogBtnClick");
    },
    searchBtnClick: _.throttle(function () {
      this.$emit("changeNewsHeaderData", this.headerData);
    }, 1000),
  },
};
</script>

<style lang="scss" scoped></style>
